import { Icon, Menu as AntMenu } from "antd";
import * as React from "react";
import { NavLink } from "react-router-dom";
const SubMenu = AntMenu.SubMenu;

function MenuRender(menu) {
  if (!Array.isArray(menu.children) || menu.children.length === 0) {
    // const path = `/${menu.pattern.replace(".","/")}`
    return (
      <AntMenu.Item key={menu.pattern}>
        <NavLink to={menu.path || ""}>
          {menu.icon && <Icon type={menu.icon || ""} />}
          <span>{menu.name}</span>
        </NavLink>
      </AntMenu.Item>
    );
  } else {
    return (
      <SubMenu
        key={menu.pattern}
        title={
          <span>
            {menu.icon && <Icon type={menu.icon || ""} />}
            <span>{menu.name}</span>
          </span>
        }
      >
        {menu.children.map(MenuRender)}
      </SubMenu>
    );
  }
}

export default MenuRender;
